p5.js在jupyter-notebook中使用

2018年07月06日

文章目录

1. 什么是p5.js
2. 怎样在notebook中使用p5.js
3. 使用

声明: 本文由DataScience发表,未经允许不得转载。转载请注明本文链接mlln.cn, 并在文后留言转载.

本文代码运行环境:

windows10
jupyter notebook
p5.js 0.6.1

什么是p5.js

p5.js是一个JavaScript库，创建之初的目的是模仿Processing软件，为艺术家，设计师，教育工作者和初学者提供便捷的编程工具，并重新定义当今的互联网。p5.js的名称使用了软件速写本的隐喻，p5.js具有一整套绘图功能。但是，它不仅限于在canvas上绘图，你可以将整个浏览器页面视为画板！为此，p5.js有很多插件实现了对including text, input, video, webcam, and sound等html5元素的控制。

p5.js是一种新的解释器，它正在积极开发中。官方编辑器即将推出，还有更多功能！

怎样在notebook中使用p5.js

我们可以使用notebook提供的cell magic来生成p5.js的页面, 然后用一个Iframe嵌入这个页面。如果你不知道什么是cell magic以及如何二次开发jupyter-notebook, 你可以访问这篇文章notebook扩展开发之前端插件开发。当然, 我们可以不关心这些技术细节, 只要执行下面的代码, 你就注册了一个p5魔法。

from IPython.core.magic import register_cell_magic
from IPython.display import IFrame

TEMPLATE = """
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>
<title>Notebook中显示P5.js页面</title>
</head>
<body>
<a href="http://mlln.cn"  target="_blank"><h3>文件: %(name)s</h3></a>
<script>
%(script)s
</script>
</body>
</html>
"""


@register_cell_magic
def p5(line, cell):
    file_id = int(line)
    filename = f"p5js-html/p5-pre-{file_id}.html"
    with open(filename, "w", encoding='utf8') as fp:
        fp.write(TEMPLATE % {"script": cell, "name": filename})
    return IFrame(filename, width="100%", height="500")

del p5

使用

注册好了p5魔法, 我们可以在cell的第一行写下%%p5 1即可在这个cell中撰写p5的代码了。其中数字1表示页面ID。如果你仔细阅读了上面的代码, 你会发现, 我们需要在本notebook目录下创建一个文件夹p5js-html用于存放生成的p5页面。下面是一个例子:

%%p5 1

  var x = 100; 
  var y = 100;

  function setup () {
    createCanvas(700, 410);
  };

  function draw () {
    background(100);
    fill(255);
    rect(x,y,50,50);
  };

输出:

需要注意的是, 如果你想再生成一个p5页面, 你需要使用不同的结果ID, 否则, 新生成的页面会覆盖原先的页面。

注意
本文由jupyter notebook转换而来, 您可以在这里下载notebook
统计咨询请加QQ 2726725926, 微信 mllncn, SPSS统计咨询是收费的
微博上@mlln-cn可以向我免费题问
请记住我的网址: mlln.cn 或者 jupyter.cn

#p5.js

p5.js在jupyter-notebook中使用

什么是p5.js

怎样在notebook中使用p5.js

使用

统计咨询

赞助

赞助推荐

常用工具

p5.js

友商赞助